
<!-- 角色权限管理 -->
<template>
  <div class="customer">
    <el-row>
      <el-col :span="24">
        <div class="customerTable">
          <el-row style="background: #fff; padding: 2px 0px 8px 2px">
            <el-input
              v-model="searchValue"
              placeholder="请输入内容"

              style="float: left; width: 160px;margin: 10px 0 0 5px"
            />

            <el-select v-model="configValue" placeholder="查询条件" style="margin-top: 10px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <!--<el-button @click="search" style="margin-top: 10px">查询</el-button>-->
            <el-button type="primary" plain icon="el-icon-search" @click="search" >查询</el-button>
            <div style="float: right;line-height: 37px;">
              <el-button icon="el-icon-menu" type="primary" plain @click="roleOrganization()">分配机构权限</el-button>
            </div>
          </el-row>

          <div style="width: 100%;overflow-y:scroll;">
            <vxe-table
              ref="mytable"
              :height="heightY"
              :data="articlesData"
              style="width: 100%; margin-top: 10px"
              :row-config="{ useKey: true, keyField: 'roleId' }"
              border
              highlight-current-row
              @current-change="selectChange"
            >
              <vxe-column type="seq" width="40" />
              <vxe-column
                field="roleName"
                title="角色名称"
                sortable
                width="220"
              />

              <vxe-column field="description" title="备注" />
            </vxe-table>
          </div>
        </div>
      </el-col>
    </el-row>
    <rolePop v-if="showRoleOrganization" ref="dialogRoleOrganization" @initData="initData" @onAddSuccess="onAddJgSuccess"/>
  </div>
</template>
  
  <script>
import { getSwRoles } from "@/api/datacentersg/achives/documentApi";
import rolePop from "@/views/datacentersg/archives/documentRole/rolePop.vue"
import { getMenus } from '@/api/young/system/role/role'
export default {
  components: {
    rolePop
  },
  data() {
    return {
      select: "",
      heightY: window.innerHeight - 200 + "px",
      heightTree: window.innerHeight - 200 + "px",
      customerName: "",
      articlesData: [],
      configValue: "",
      showRoleOrganization: false,
      currentPage: 1,
      perPage: 20,
      totalItems: 0,
      props: {
        label: "name",
        children: "zones",
        isLeaf: "leaf",
      },
      selectedNode: null,
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  created() {
    this.initData();
  },
  methods: {
    async initData() {

      const that = this
      // 组装分页参数
      const params = {
        'page': this.currentPage, // 当前多少页
        'rows': this.perPage // 每页显示数据
      }

      const R = await getMenus(params)

      const data = R.resultdata

      this.totalItems = data.records // 设置总记录数
      this.articlesData = data.rows // 填充列表数据

      this.$nextTick(() => {
        this.$refs.mytable.recalculate()
      })

      // getSwRoles().then((reslut)=>{
      //   if(reslut.code == 0){
      //     this.articlesData =reslut.data.res_data
      //   }
      // })
    },
    selectChange(currentRow) {
      this.role = currentRow.row
    },
    roleOrganization() {
      //判断当前选中行
      //判断当前选中行
      if (!this.role || this.role == null || this.role == undefined) {
        this.$message({
          type: 'warning',
          message: '请选中一行'
        });
        return;
      }
      //判断当前选中是否为干部一二三四五以及系统管理员
        this.showRoleOrganization = true
        this.$nextTick(() => {
          const params = {
            'roleId': this.role.roleId
          }
          this.$refs.dialogRoleOrganization.initItemPermissions(params)
        })
    },
    onAddJgSuccess(type) {
      this.showRoleOrganization = false
    },
    cellClickEvent(row) {
      this.selectedNode = row.row;
    },
  },
};
</script>
  
  <style scoped>
.customer {
  width: 100%;
  height: 100%;
}
.customerTable {
  width: 100%;
  float: left;
  padding: 5px;
}
.customerTree {
  width: 100%;
  float: left;
  padding: 5px;
}
</style>